<template>
  <el-form :model="ruleForm">
    <el-form-item
      prop="desc"
      :rules="{
        required: true, message: `请输入${title}`, trigger: 'blur'
      }"
    >
      <div class="relative">
        <el-input
          type="textarea"
          :placeholder="`请输入${title}，没有写无`"
          show-word-limit
          v-model.trim="ruleForm.desc"
          :autosize="{ minRows: 4 }"
          :readonly="type === 1"
          @blur="blurHandler"
          @keyup.enter.native="enterHandler"
        />

<!--        <div class="absolute">-->
<!--          <span v-if="type === 1">{{ ruleForm.province }}</span>-->
<!--          <el-select-->
<!--            v-else-->
<!--            v-model="ruleForm.province"-->
<!--            filterable-->
<!--            size="small"-->
<!--            placeholder="请选择省份"-->
<!--            @change="changeHandler"-->
<!--          >-->
<!--            <el-option-->
<!--              v-for="item in provinceList"-->
<!--              :key="item.code"-->
<!--              :label="item.name"-->
<!--              :value="item.name">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </div>-->
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import ProvinceData from "@/views/crm/data/province.json";

export default {
  name: "MultiInput",
  data() {
    return {
      provinceList: [],
      ruleForm: {
        province: '',
        desc: ''
      },
    }
  },
  props: {
    text: {
      type: String,
      required: true,
    },
    province: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    type: {
      type: Number,
      default: 1
    }
  },
  watch: {
    text: {
      deep: true,
      immediate: true,
      handler(v) {
        this.ruleForm.desc = v
      }
    },
    province: {
      deep: true,
      immediate: true,
      handler(v) {
        this.ruleForm.province = v
      }
    },
  },
  created() {
    this.provinceList = ProvinceData
  },
  methods: {
    enterHandler() {
      // 阻止默认行为（例如表单提交）
      event.preventDefault();
      // 在某些情况下，如果你需要在文本中插入换行符，你也可以手动处理：
      this.ruleForm.desc += '\n'; // 这将导致每次回车都在文本末尾添加一个新行，但这不是必须的，因为设置了white-space和overflow-wrap后，浏览器会自动处理换行。
    },
    blurHandler() {
      this.$emit('update:text', this.ruleForm.desc)
    },
    changeHandler() {
      this.$emit('update:province', this.ruleForm.province)
    },
  }
}
</script>

<style scoped lang="scss">
.relative{
  position: relative;

  .absolute {
    position: absolute;
    top: 10px;
    left: 15px;
    width: 160px;
  }

  ::v-deep .el-textarea__inner {
    padding: 50px 15px 5px;
  }
}
</style>
